<template>
    <div class="default">
      <div class="func-board">
        <div v-for="item in value" :key="item.id" class="func-item" :class="`animation-delay-${item.id}`">
          <Functions :icon="item.icon" :path="checkLogin(item.path)"></Functions>
        </div>
      </div>
    <ToolBox></ToolBox>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useLoginStore } from '@/stores/login';
import Functions from '@/components/Functions/index.vue'
import ToolBox from '@/components/ToolBox/index.vue'
const loginStore = useLoginStore()
let value = ref([
  {
    id: 1,
    icon: new URL('@/assets/functions/img-1.png',import.meta.url).href,
    path: '/aiDesign'
  },
  {
    id: 2,
    icon: new URL('@/assets/functions/img-2.png',import.meta.url).href,
    path: '/aiSource'
  },
  {
    id: 3,
    icon: new URL('@/assets/functions/img-3.png',import.meta.url).href,
    path: '/aiAnalysis'
  },
])
function checkLogin(targetPath: string) {
  const allowedRoutes = ['/login/account', '/login/vertification', '/login/register'];
  if (!loginStore.isLoggedIn && !allowedRoutes.includes(targetPath)) {
    return '/login/account';
  }
  return targetPath;
}
</script>

<style scoped>
@import url('@/views/home-default/index.less');
</style>